<template>
    <div class="container">
        <van-nav-bar>
            <van-icon name="wap-nav" @click="onMenuClick" color="#444" slot="left"></van-icon>
            <van-tabs slot="title" v-model="tabIndex">
                <van-tab title="出租车"></van-tab>
                <van-tab title="城际拼车"></van-tab>
                <van-tab title="物流"></van-tab>
            </van-tabs>
        </van-nav-bar>
        <keep-alive>
            <page-taxi v-if="tabIndex == 0"></page-taxi>
            <page-share v-if="tabIndex == 1"></page-share>
            <page-express v-if="tabIndex == 2"></page-express>
        </keep-alive>

        <van-popup v-model="show" position="left">
            <div class="left-header van-hairline--bottom">
                <img src="../assets/avatar.png" class="avatar"/>
                <p class="username">{{userName}}</p>
            </div>
            <van-cell-group>
                <van-cell title="我的行程">
                    <i class="iconfont icon-cell icon-xingcheng" slot="icon"></i>
                </van-cell>
                <van-cell title="我的物流" @click="$router.pushTrasnlate('/my/express')">
                    <i class="iconfont icon-cell icon-express" slot="icon"></i>
                </van-cell>
                <van-cell title="我的拼车" @click="$router.pushTrasnlate('/my/share')">
                    <i class="iconfont icon-cell icon-share" slot="icon"></i>
                </van-cell>
                <van-cell title="我的账户">
                    <i class="iconfont icon-cell icon-yue" slot="icon"></i>
                </van-cell>
                <van-cell title="设置">
                    <i class="iconfont icon-cell icon-setting" slot="icon"></i>
                </van-cell>
            </van-cell-group>
            <div @click="logoutClick()" class="logout van-hairline--top van-hairline--bottom">
                <i class="iconfont icon-exit"></i>退出登录
            </div>
        </van-popup>
    </div>
</template>

<script>
    import HlSegment from "../components/hl-segment";
    import PageExpress from "./PageExpress";
    import PageShare from "./PageShare";
    import utils from '../utils'
    import PageTaxi from "./PageTaxi";

    export default {
        name: "Main",
        components: {PageTaxi, PageShare, PageExpress, HlSegment},
        data() {
            let self = this;
            return {
                tabIndex: 1,
                pc_type: 0,
                show: false,
                geo: null,

                lat: 0,
                lng: 0,

            }
        },

        computed: {
            userName() {
                let userInfo = this.$store.state.userInfo
                if (userInfo) {
                    return userInfo.passenger.name
                } else {
                    return '未登录'
                }
            }
        },


        mounted() {

        },

        methods: {

            logoutClick() {
                this.$store.commit('clearUserInfo');
                this.$router.pushTrasnlate('/login');
            },

            onMenuClick() {
                if (utils.checkLogin()) {
                    this.show = true
                } else {
                    this.$router.pushTrasnlate('/login')
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .van-popup--left {
        width: 280px;
        height: 100%;
        .left-header {
            height: 160px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .avatar {
                width: 48px;
                height: 48px;
                border-radius: 50%;
            }
            .username {
                font-size: 14px;
                color: #666;
                margin-top: 8px;
                margin-bottom: 0;
            }
        }
        .logout {
            height: 40px;
            background: #fff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            width: 100%;
            font-size: 14px;
            color: #444;
            &:active {
                background: darken(#fff, 5%);
            }
            .iconfont {
                font-size: 18px;
                color: #444;
                margin-right: 8px;
            }
        }

    }

    .icon-cell {
        font-size: 18px;
        color: #888;
        margin-right: 8px;
    }

    .mapView {
        width: 100%;
        height: 200px;
    }

</style>
